<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<base href="<%=basePath%>">
    <meta charset="UTF-8"/>
    <title>Krajee JQuery Plugins - &copy; Kartik</title>
    <link href="<%=basePath%>/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="<%=basePath%>/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="<%=basePath%>/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="<%=basePath%>/js/plugins/sortable.js" type="text/javascript"></script>
    <script src="<%=basePath%>/js/fileinput.js" type="text/javascript"></script>
    <script src="<%=basePath%>/js/locales/fr.js" type="text/javascript"></script>
    <script src="<%=basePath%>/js/locales/es.js" type="text/javascript"></script>
    <script src="<%=basePath%>/themes/explorer-fa/theme.js" type="text/javascript"></script>
    <script src="<%=basePath%>/themes/fa/theme.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="<%=basePath%>/js/bootstrap.min.js" ></script>
</head>
<body>
	<div class="page-container">
			<ol class="breadcrumb">
	    <li><a>商家管理中心</a></li>
	    <li><a>我的商品</a></li>
	    <li class="active">添加图片</li>
	</ol>
	<form action="" method="post" class="form form-horizontal" id="form-mulImg-add" enctype="multipart/form-data">
		<div class="container kv-main">
		   <div class="form-group">
			<div class="btn-group">
			    <label for="name">一级分类</label>
			    <select class="form-control" id="oneClassList" name="oneClassList">
			      <c:forEach items="${goodsOneClass }" var="oneClass">
						<option value="${oneClass.classId }">${oneClass.className }</option>					
					</c:forEach>
			    </select>
			</div>
			<div class="btn-group">
			   <label for="name">二级分类</label>
			    <select class="form-control" id="twoClassList" name="twoClassList">
				    		
			    </select>
			</div>
			<div class="btn-group">
			   <label for="name">选择商品</label>
			   		<select class="form-control" id="goodList" name="goodList">
			    </select>
			</div>
			<div class="btn-group">
			 <label for="name">商品介绍</label>
    			<span class="form-control" id="goodInfo" type="text" name="goodInfo"></span>
		</div>
		</div>
    		
    	
        <div class="form-group">
            <div class="file-loading">
                <input id="file-1" type="file" name="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
            </div>
        </div>
        <div class="btn-group">
       		 <button class="btn btn-info radius" onclick="multiImg_submit()"> 保存并提交</button>
        </div>
         <div class="btn-group">
       		<button onClick="" class="btn btn-warning radius" type="reset">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
        </div>
        </div>
        </form>
</div>
</body>
<script>
	function multiImg_submit() {
		var formData = new FormData($( "#form-mulImg-add" )[0]);   
          $.ajax( {  
              type : "POST",  
              url : "UploadImgMutiServlet",  
              data : formData, 
              async: false,  
              cache: false,  
              contentType: false,  
              processData: false, 
              success : function(msg) { 
            	  alert('图片添加成功');
              }
          });  
	};
    $("#file-1").fileinput({
        theme: 'fa', //设置主题
        uploadUrl: '<%=basePath%>UploadImgServlet2', // 路径
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize: 1000,   //最大文件大小值
        maxFilesNum: 10,     //最大数量
        showCancel: false,
        showUpload: false, //是否显示上传按钮
        //allowedFileTypes: ['image', 'video', 'flash'],
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        },
    });
    $(function(){
        //给下拉列表添加事件
        $("#oneClassList").change(function(){
            //post传输，固定四个参数；
            //第一个参数是url:发送请求地址
            //第二个参数data:待发送的值key/value
            //第三个参数callback:发送返回时回调函数
            //第四个参数type:返回内容格式，常用text，json,
            $.post("two.class",{oneClassId:$(this).val()},
                function(result){
                //获取第二级城市的id
                var twoClassList=$("#twoClassList");
                var goodList=$("#goodList");
                var goodInfo=$("#goodInfo");
                //清空第二级里面的城市
                twoClassList.empty();
                goodList.empty();
                goodInfo.empty();
                for(var i=0;i<result.length;i++){
                	twoClassList.append("<option value="+result[i].classId+">"+result[i].className+"</option>");
                }
            },"json");
        });
        //给下拉列表添加事件
        $("#twoClassList").change(function(){
            //post传输，固定四个参数；
            //第一个参数是url:发送请求地址
            //第二个参数data:待发送的值key/value
            //第三个参数callback:发送返回时回调函数
            //第四个参数type:返回内容格式，常用text，json,
            $.post("getGoodsNameByTwo.goods",{twoClassId:$(this).val()},
                function(result){
                //获取第二级城市的id
                var goodList=$("#goodList");
                var goodInfo=$("#goodInfo");
                //清空第二级里面的城市
                goodList.empty();
                goodInfo.empty();
                for(var i=0;i<result.length;i++){
                	goodList.append("<option value="+result[i].goodId+">"+result[i].goodName+"</option>");
                }
            },"json");
        });
      //给下拉列表添加事件
        $("#goodList").change(function(){
            //post传输，固定四个参数；
            //第一个参数是url:发送请求地址
            //第二个参数data:待发送的值key/value
            //第三个参数callback:发送返回时回调函数
            //第四个参数type:返回内容格式，常用text，json,
            goodId = $(this).val();
            $.post("getGoodsByGoodId.goods",{goodId:$(this).val()},
                function(result){
                //获取第二级城市的id
                var goodInfo=$("#goodInfo");
                //清空第二级里面的城市
                goodInfo.empty();
                goodInfo.append(result.goodInfo);
            },"json");
        });
    });
    $("#oneClassList>option").eq(0).ready(function(){
    	$.post("two.class",{oneClassId:$('#oneClassList>option').eq(0).val()},
                function(result){
                //获取第二级城市的id
                var twoClassList=$("#twoClassList");
                var goodList=$("#goodList");
                //清空第二级里面的城市
                twoClassList.empty();
                goodList.empty();
                for(var i=0;i<result.length;i++){
                	twoClassList.append("<option value="+result[i].classId+">"+result[i].className+"</option>");
                }
            },"json");
    });

  
</script>
</html>